<template>
  <el-container >
    <div class="editSum">
      <div class="setAll" v-if="mtype == 'm'">
        <div class="l_title">批量设置：</div>
        <!-- <el-input placeholder="成本价" style="width:180px;margin-right:20px;"></el-input> -->
        <el-input placeholder="销售价" v-model="set_all.sell_price" style="width:180px;margin-right:20px;"></el-input>
        <el-input placeholder="库存" v-model="set_all.total" style="width:180px;margin-right:20px;"></el-input>
        <el-button style="margin-right:10px;" @click="setAll">应用</el-button>
      </div>
      <div class="setList" v-if="mtype == 'm'">
        <el-table :data="tabledata" :span-method="arraySpanMethod" :key="rk">
          <template v-for="(item,i) in keylist">
            <el-table-column :prop="'k'+i" :key="i" :label="item"></el-table-column>
          </template>
          <el-table-column label="销售价(元)">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sell_price"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存(件)">
            <template slot-scope="scope">
              <div style="display:flex;align-items: center;">
                <el-input v-model="scope.row.total"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="setList" v-if="mtype == 's'">
        <div class="sku_header">
          <table cellpadding="0" cellspacing="0" width="100%">
            <colgroup>
              <col>
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>售价</th>
                <th>库存</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="sku_body">
          <table cellpadding="0" cellspacing="0" width="100%">
            <colgroup>
              <col>
              <col>
            </colgroup>
            <tbody>
              <tr>
                <td><el-input v-model="objs.data.sell_price" placeholder="销售价" style="width:180px;margin-right:20px;"></el-input></td>
                <td><el-input v-model="objs.data.total" placeholder="库存" style="width:180px;margin-right:20px;"></el-input></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="setBtns">
        <el-button type="primary" @click="saveData">保存数据</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  getPro,
  editProInventory
} from '@/api/shop/product';
import {
  doCombination,
  objCopy
} from "@/utils/index";

export default {
  name:'inventory',
  data(){
    return {
      rk:1,
      set_all:{
        sell_price:'',
        total:''
      },
      tabledata:[],
      keylist:[],
      mtype:'',//sku类型,M:sku,S:无sku
      isLoading:false,
      objs:{
        id:'',
        type:0,
        sell:0,
        data:{
          sell_price:'',
          total:0
        }
      },
      objm:{
        id:'',
        type:1,
        inventory_data:{
          id:'',
          sell_price:'',
          total:0
        }
      },
      obj:{
        has_sku:0,//是否有sku:0:没有,1:有
        sku_value:[{
          name:'颜色',
          attrValue:[{
            value:'红色'
          },{
            value:'黄色'
          },{
            value:'蓝色'
          }],
          has_pic:0
        },{
          name:'尺码',
          attrValue:[{
            value:'L'
          },{
            value:'M'
          },{
            value:'S'
          }],
          has_pic:0
        }],//sku对象{“1&颜色”:[“1&红色”,”2&白色”],”2&尺码”:[“3&L”,”4&M”]},当has_sku为1时必选
        sku:[{
          pvs:'颜色:白色,尺码:L',
          weight:0,
          inventory:{
            original_price:0,
            sell_price:0,
            total:0
          },//有sku不开启门店库存下的库存对象(is_store_inventory为0时必选)
          store_sku_inventory:[{
            store_id:'',
            original_price:0,
            sell_price:0,
            total:0
          }]//有sku的门店库存对象数组(is_store_inventory为1时必选)
        }]//sku对象数组(当has_sku为1时必选)
      }
    }
  },
  methods:{
    //初始化
    init(id){
      this.getPro(id);
    },
    //获取商品原始数据
    getPro(id){
      this.isLoading = true;
      getPro(id).then(res => {
        this.isLoading = false;
        let o = res.msg;
        //判断是否有SKU
        this.mtype = o.has_sku ? 'm' : 's';
        //处理数据
        if(o.has_sku == 1){
          // objCopy(this.obj,o);
          this.obj=o
          this.formatSkuData();
        }else{
          this.objs.id = o.id;
          this.objs.sell = o.sell;
          this.objs.data.sell_price = o.sell_price;
          this.objs.data.total = o.total - o.sell;
        };

      }).catch(e => {
        this.isLoading = false;
      });
    },
    //初始化SKU数据
    formatSkuData(){
      this.rk++;
      let sl = this.obj.sku_value,
        list = [],keylist = [];


      sl.forEach((e,i) => {
        keylist.push(e.name);
        //预处理attrValue数据,添加sku的key值以及父ID
        e.attrValue.forEach(ee => {
          ee.name = e.name;
          ee.pid = e.id;
        });

        list.push(e.attrValue);
      });

      this.keylist = keylist;

      let alist = doCombination(list);
      //console.log(alist)

      let t = [];
      alist.forEach((e,i) => {
        let o = {};
        for(let i=0,l=this.keylist.length;i<l;i++){
          let d = 'k' + i;
          o[d] = e[i].value ? e[i].value : '#';
        };

        o.weight = 0;
        o.original_price = 0;
        o.sell_price = 0;
        o.total = 0;
        o.store_inventory = [];

        //o.cost_price = this.obj.sku[i].inventory.sell_price;
        //定位数据
        let tls = [],s = '';
        tls = e.filter(_ => {
          return _.value != '';
        });
        //拼装标志
        tls.forEach(e => {
          s += e.pid + ':' + e.id + ',';
        });
        s = s.substring(0,s.length - 1);
        console.log(this.obj.sku)
        console.log(s)
        //定位
        let target = this.obj.sku.filter(_ => {
          return _.pvs == s;
        });
        debugger
        if(target.length > 0){
          o.weight = target[0].weight;
          o.original_price = target[0].inventory.original_price;
          o.sell_price = target[0].inventory.sell_price;
          o.total = target[0].inventory.total - target[0].inventory.sell;
          o.sell = target[0].inventory.sell;

          //o.pid = target[0].id;
          o.id = target[0].inventory.id;
          o.sku_id = target[0].inventory.sku_id;

        };

        t.push(o);
      });

      console.log(t)
      this.tabledata = t;
      console.log(t)

    },
    //表格合并功能计算函数
    arraySpanMethod({row,column,rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        let d = this.obj.sku_value[1] ? this.obj.sku_value[1].attrValue.length : 1;

        if (this.obj.sku_value[2]&&this.obj.sku_value[2].attrValue) {
          d = d * this.obj.sku_value[2].attrValue.length;
        }

        if (rowIndex % d === 0) {
          return {
            rowspan: d,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else if (columnIndex === 1) {
          let d = this.obj.sku_value[2] ? this.obj.sku_value[2].attrValue.length : 1;

          if (rowIndex % d === 0) {
            return {
              rowspan: d,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
      };
    },
    //SKU批量设置参数
    setAll(){
      this.tabledata.forEach(e => {
        //批量设置销售价
        if(this.set_all.sell_price){
          e.sell_price = this.set_all.sell_price;
        };
        //批量设置库存
        if(this.set_all.total){
          e.total = this.set_all.total;
        };
      });
    },



    //保存数据
    saveData(){
      debugger
      console.log(this.mtype)
      console.log(this.tabledata)
      console.log(this.obj)

      let d = {};
      if(this.mtype == 's'){
        //无SKU
        d = {...this.objs};
        d.data.total = parseInt(this.objs.data.total) + parseInt(this.objs.sell);
      }else if(this.mtype == 'm'){
        //有SKU
        //拼接sku数据
        console.log(this.tabledata)
        let l = [];
        this.tabledata.forEach(e => {
          l.push({
            id:e.id,
            sell_price:e.sell_price,
            total:parseInt(e.total) + parseInt(e.sell)
          });
        });

        d = {
          id:this.obj.id,
          type:1,
          inventory_data:l
        };
      };
      // console.log('提交数据')
      // console.log(d)

      this.isLoading = true;
      editProInventory(d).then(res => {
        this.isLoading = false;
        this.$emit('success');
      }).catch(e => {
        this.isLoading = false;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table tbody tr:hover>td {
  background-color:#fff!important;
  color: #000!important;
}

.editSum{
  width: 100%;

  .setAll{
    background-color: #f2f2f2;
    display: flex;
    margin-bottom: 20px;
    padding: 20px 0;
    align-items: center;

    .l_title{
      width: 100px;
      margin-right:20px;
      text-align: right;
    }
  }

  .setList{
    max-height: 400px;
    overflow-y: auto;

    .sku_header{
      border-bottom: 1px solid #DCDFE6;

      th{
        padding: 5px 0;
      }
    }

    .sku_body{
      tr{
        td{
          padding: 10px;
          text-align: center;
          border-bottom: 1px solid #DCDFE6;
        }

      }
    }
  }

  .setBtns{
    margin-top: 20px;
  }
}
</style>
